<template>
  <div class="phoneListInfo">
    <van-nav-bar @click-left="$router.back()">
      <template #title> {{ obj.proname }} </template>
      <template #left> &lt; </template>
      <template #right>
        <div class="menu">
          <span @click="showMenu">...</span>
          <van-popover />
          <!-- 气泡弹出框 -->
          <van-popover
            v-model="showPopover"
            theme="dark"
            trigger="click"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-button  type="primary">...</van-button>
            </template>
          </van-popover>
        </div>
      </template>
    </van-nav-bar>
    <!-- 空白处 -->
    <div class="infoEmply"></div>

    <!-- 图片区域 -->
    <div class="my-detail-swiper">
      <!-- 轮播 -->
      <van-swipe
        class="my-swipe"
        :autoplay="0"
        indicator-color="white"
        @change="onChange"
      >
        <van-swipe-item
          v-for="(item, index) in details"
          :key="index"
          @click="showImge(index)"
        >
          <img
            :src="item"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>

      <van-image-preview
        v-model="show"
        :images="images"
        @change="onChange"
      >
        <template v-slot:index>第{{ index }}页</template>
      </van-image-preview>
      <div class="my-indicators">{{ curPage + 1 }}/4</div>
      <div class="video-btn"></div>
    </div>

    <div class="category">{{ obj.category }}</div>
    <div class="proname">{{ obj.proname }}</div>

    <span class="price">{{ (obj.originprice * obj.discount) / 10 }}</span>
    <s class="price">{{ obj.originprice }}</s>
    <div class="van-goods-actions"></div>
    <div class="text">
      <div class="category">{{ obj.category }}</div>
      <div class="proname">{{ obj.proname }}</div>
    </div>
    <div class="pricetext">
      <span class="price">{{ (obj.originprice * obj.discount) / 10 }}</span>
      <s class="price1">${{ obj.originprice }}</s>
      <div class="van-goods-actions"></div>
    </div>

     <!-- 商品导航 -->
     <van-goods-action v-if="issale==0">
  <van-goods-action-icon icon="chat-o" text="客服"  />
  <van-goods-action-icon icon="cart-o" text="购物车" @click="cart" />
  <van-goods-action-button
    type="warning "
   disabled text="该商品已下架"
  />
</van-goods-action>
    <van-goods-action v-else>
  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-goods-action-icon icon="cart-o" text="购物车"  to="cart"/>
  <van-goods-action-button type="warning" text="加入购物车" to="cart" />
  <van-goods-action-button type="danger" text="立即购买"  />
</van-goods-action>
  </div>
</template>
<script>
import Vue from 'vue'
import { detaillunbo } from '@/api/goods';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
import { ImagePreview,Toast } from 'vant';
// 气泡

export default {
  data() {
    return {
      details: [],
      obj: {},
      curPage: 0,
      issale:0,
      menuFlag: false,
      arr: {},
    
      //  气泡弹出框
      showPopover: false,
      actions: [
      {index:0, text: '首页',icon:'location-o' }, 
     {index:1, text: '分类',icon:'like-o' },
     {index:2, text: '个人中心',icon:'friends-o' },
     {index:3, text: '购物车',icon:'shopping-cart-o' },],
    };
  },
  props: ['id'],
  methods: {
    onChange(a) {
      this.curPage = a;
    },
    showMenu() {
      this.menuFlag = !this.menuFlag;
    },
    onClickRight() {
      Toast('按钮');
    },

    async detailLunbo(id) {
      const res = await detaillunbo(id);
      this.issale=res.data.data.issale;
      const arr = (this.obj = res.data.data);
      this.details.push(arr.img1, arr.img2, arr.img3, arr.img4);
    },
    showImge(startPosition) {
      const details = [];

      details.push(this.arr.img1, this.arr.img2, this.arr.img3, this.arr.img4);
      console.log(this.details);
      ImagePreview({
        images: this.details,
        startPosition,
      });
    },
    // 点击选项时触发
    onSelect({ index }) {
      switch (index) {
        case 0:
          this.$router.push('/home');
          break;
        case 1:
          this.$router.push('/category');
          break;
        case 2:
          this.$router.push('/login')
          break
          case 3:
            this.$router.push('/cartIndex')
            break
      }
    },
  },
  created() {
    this.detailLunbo(this.id);
    console.log(this.details);
    console.log(this.arr.issale);
  },
};
</script>

<style lang="scss">
.phoneListInfo {
  .menu{
    .van-button--primary {
    color: blue;
    background-color: #fff;
    border: none;
    font-size:16px;
}
  }
  .van-nav-bar__left {
    font-size: 20px;
    font-family: '宋体';
    color: blue;
  }
  .van-nav-bar__right {
    font-size: 20px;
    font-family: '宋体';
    color: blue;
  }
  .infoEmply {
    height: 30px;
    width: 100%;
    background-color: #f66;

    // margin-top:30px;
  }
  .my-detail-swiper {
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
      position: relative;
    }
    .my-indicators {
      width: 50px;
      height: 20px;
      background-color: #ccc;
      text-align: center;
      line-height: 20px;
      border-radius: 10px 0 0 10px;
      position: absolute;
      bottom: 400px;
      right: 0px;
    }
  }
  .text {
    display: flex;
    .category {
      background-color: #ee0a24;
      width: 50px;
      height: 20px;
      line-height: 20px;
      align-items: center;
      text-align: center;
      margin: 10px;
      border-radius: 4px;
      color: #fff;
    }
    .proname {
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0;
    }
  }
  .pricetext {
    .price {
      font-size: 28px;
      color: #f66;
    }
  }
}
</style>
